<?php
/*
Template Name: Contact
*/
?>

<?php get_header(); 
?>
<style>
#email a{
	background-color: transparent;
	cursor: pointer;
	position: absolute;
	z-index: 999;
	height: 300px;
    left: 280px;
    top: 350px;
    width: 420px;
}
.mailing_list {
background-color: white;
border: medium none;
font-family: Helvetica;
font-size: 20px;
height: 40px;
left: 171px;
position: absolute;
top: 461px;
width: 300px;
z-index: 9999;
}
#message {
left: 171px;
position: absolute;
top: 500px;
z-index: 9999;
}
</style>
<div class="content_contact" style="position:relative">
<!--<div id="email" onclick="showDialogSendmail('morgan@adoomofonesown.com')" title="Contact to Morgan">
	<a href="#"></a>
</div>-->
<input class="mailing_list" name="join_email" id="join_email"/>
<span id="message"></span>
</div>



<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/js/validator.js'></script> 
<div id="dialogSendmail" title="Contact Form" style="text-align:left;display:none;font-size: 10pt;">
	<div id="msg" style="margin-bottom:5px"></div>
	<center>
	<form id="formContact" name="formContact">
	<input type="hidden" name="action" value="contact"/>
	<table border=0 width="100%">
		<tr height="30px">
			<td style="width:100px"><font color="red" title="Must input">*</font> From:</td>
			<td><input style="width:300px" type="text" name="contact_from" id="contact_from"/></td>
		</tr>
		<tr height="30px">
			<td><font color="red" title="Must input">*</font> To:</td>
			<td><input style="width:300px" type="text" name="contact_to" id="contact_to"/></td>
		</tr>
		<tr height="30px">
			<td>Subject:</td>
			<td><input style="width:300px" type="text" name="contact_subject" id="contact_subject"/></td>
		</tr>
		<tr height="30px">
			<td style="vertical-align:top"><font color="red" title="Must input">*</font> Content:</td>
			<td><textarea rows="5" style="width: 300px; float: left;" name="contact_content" id="contact_content"></textarea></td>
		</tr>
		<tr height="30px">
			<td colspan="2" align="center">
				<input id="contact_btsubmit" type="button" value="Send" onclick="doSend()"/>
			</td>
		</tr>
	</table>
	</form>
	</center>
</div>  
<script>
function byId(id) {
	return document.getElementById(id);
}
	function message(msg,type) {
		if(type==1) { //Thong diep thong bao
			str = "<div class='positive'><span class='bodytext' style='padding-left:30px;'>"+msg+"</span></div>";
			byId("msg").innerHTML = str;
		} else if(type == 0) { //Thong diep bao loi
			str = "<div class='negative'><span class='bodytext' style='padding-left:30px;'>"+msg+"</span></div>";
			byId("msg").innerHTML = str;
		}
	}	

	function showDialogSendmail(to) {
		jQuery("#formContact")[0].reset();
		jQuery('#contact_btsubmit').removeAttr('disabled');
		jQuery("#contact_to").val(to);
		jQuery("#dialogSendmail").dialog("open");
	}
	function doSend() {
		/*if(byId("contact_from").value == "") {
			alert('You must input from email!');
			byId("contact_from").focus();
			return;
		}
		if(byId("contact_to").value == "") {
			alert('You must input to email!');
			byId("contact_to").focus();
			return;
		}
		if(byId("contact_subject").value == "") {
			alert('You must input subject!');
			byId("contact_subject").focus();
			return;
		}*/
		checkValidate=true;
		validate(['require','email'],'contact_from',["Please input your email!","Wrong format email!"]);
		validate(['require','email'],'contact_to',["Please input email to contact!","Wrong format email!"]);
		validate(['require'],'contact_content',["Please input content!"]);
		if(checkValidate==false) {
			return;
		}
		dataString = jQuery("#formContact").serialize();
		jQuery('#contact_btsubmit').attr('disabled','disabled');
		byId("msg").innerHTML = "Sending...";
		jQuery.ajax({
			type : "POST",
			cache: false,
			url : "<?php echo get_bloginfo('wpurl'); ?>/ajax?",
			data: dataString,
			success : function(data){	
				//alert(data);
				jQuery('#contact_btsubmit').removeAttr('disabled');
				if(data == "DONE") {
					message("Send email successfully!",1);
				} else {
					message("Send email fail!",0);
				}
				
			},
			error: function(data){ 
				jQuery('#contact_btsubmit').removeAttr('disabled');
				message("Send email fail!",0);
				alert (data);
			}			
		});
	}
	function error(msg) {
		byId("message").innerHTML = '<font color="red">'+msg+'</font>';
	}
	function success(msg) {
		byId("message").innerHTML = '<font color="green">'+msg+'</font>';
	}
	jQuery(document).ready(function() {
		/*jQuery("#dialogSendmail").dialog({
			autoOpen: false,
			hide: 'fade',
			show: 'fade',
			minWidth: 420,
			modal: true,
			resizable :false
		});*/
		jQuery('#join_email').bind('keypress', function(e) {
			var code = (e.keyCode ? e.keyCode : e.which);
			if(code == 13) { //Enter keycode
				var join_email = byId("join_email").value;
				if(join_email == "") {
					error('Please input email!');
					return;
				}
				if(echeck(join_email)==false) {
					error('Email is not valid!');
					return;
				}
				jQuery('#join_email').attr('disabled','disabled');
				byId("message").innerHTML = "Sending...";
				
				jQuery.ajax({
					type : "POST",
					cache: false,
					url : "<?php echo get_bloginfo('wpurl'); ?>/ajax?",
					data: 'action=sign_up&join_email='+join_email,
					success : function(data){	
						//alert(data);
						jQuery('#join_email').removeAttr('disabled');
						if(data == "DONE") {
							success("Send email successfully!");
						} else {
							error("Send email fail!");
						}
						
					},
					error: function(data){ 
						jQuery('#join_email').removeAttr('disabled');
						error("Send email fail!");
					}			
				});
			}
		});

	});
</script>
            

<?php get_footer(); ?>